<template>
  <view class="content">
    <view class="title">
      已参与溯源的农户,公司
      <text class="Title_attached"
        >当前所在区域:{{ cityinfo.properties.name }}</text
      >
    </view>
    <view class="Num">
      <view class="item">
        <view>{{ form.city }}</view>
        <view>本省已参与溯源的市</view>
      </view>
      <view class="item">
        <view>{{ form.district }}</view>
        <view>本省已参与溯源的县</view>
      </view>
      <view class="item">
        <view>{{ form.enterprise }}</view>
        <view>本省已参与溯源的农户</view>
      </view>
      <view class="item">
        <view>{{ form.enterprise }}</view>
        <view>本省已参与溯源的公司</view>
      </view>
    </view>
    <view class="map">
      <!-- <view class="charts-box"> -->
      <qiun-data-charts
        :onzoom="true"
        :ontouch="true"
        :active="true"
        :reload="reload"
        :reshow="reshow"
        :ontap="true"
        @getIndex="getIndex"
        type="map"
        :opts="opts"
        :chartData="chartData"
      />
    </view>
  </view>
</template>

<script>
const app = getApp();
import { getMap } from "../../api/group.js";
import { Traceabilitybase, Traceability } from "@/api/traceability.js";
function coordinateToPoint(
  longitude,
  latitude,
  bounds,
  scale,
  xoffset,
  yoffset,
  mercator
) {
  var x = longitude;
  var y = latitude;
  if (mercator == true) {
    x = (longitude * 20037508.34) / 180;
    y = Math.log(Math.tan(((90 + latitude) * Math.PI) / 360)) / (Math.PI / 180);
    y = (y * 20037508.34) / 180;
  }
  return {
    x: (x - bounds.xMin) * scale + xoffset,
    y: (bounds.yMax - y) * scale + yoffset,
  };
}
export default {
  data() {
    return {
      reshow: false,
      reload: false,
      select: true,
      ThemeColors: app.globalData.ThemeColors,
      screenWidth: uni.getSystemInfoSync().windowWidth,
      chartData: {},
      num: -1,
      opts: {
        color: [
          "#cafac8",
          "#cafac8",
          "#cafac8",
          "#cafac8",
          "#cafac8",
          "#cafac8",
          "#cafac8",
          "#cafac8",
          "#cafac8",
          "#cafac8",
          "#cafac8",
          "#cafac8",
          "#cafac8",
        ],
        padding: [0, 0, 0, 0],
        dataLabel: true,
        enableScroll: false,
        extra: {
          map: {
            border: true,
            borderWidth: 1,
            borderColor: "#666666",
            fillOpacity: 0.6,
            activeBorderColor: "#F04864",
            activeFillColor: "#28a745",
            activeFillOpacity: 1,
          },
        },
      },
      series: [],
      cityinfo: {
        properties: {
          name: "黑龙江省",
        },
      },
      citys: [],
      markPoints: [], //坐标点
      address: ["黑龙江省"],
      adcode: [230000],
      form: {},
      parent: [],
      parent2: 0,
    };
  },
  onReady() {
    this.getServerData();
    this.getData() //获取溯源数据
  },
  methods: {
    async complete(e) {
      //坐标点
      const res = await Traceabilitybase({
        data: {
          index:
            this.address.length == 3
              ? this.address.length
              : this.address.length + 1,
          city:
            this.address.length == 1
              ? this.address[0]
              : this.address[0] + "/" + this.address[1],
        },
      });
      let markPoints = [];
      if (res.Status === "success") {
        markPoints = res.Data;
        markPoints.forEach((item) => {
          item.longitude = this.getGps(item.name)[0];
          item.latitude = this.getGps(item.name)[1];
        });
      }
      const mapData = e.opts.chartData.mapData;
      for (var i = 0; i < markPoints.length; i++) {
        const points = coordinateToPoint(
          markPoints[i].longitude,
          markPoints[i].latitude,
          mapData.bounds,
          mapData.scale,
          mapData.xoffset,
          mapData.yoffset,
          mapData.mercator
        );
        markPoints[i].x = points.x;
        markPoints[i].y = points.y;
      }
      this.markPoints = markPoints;
    },

    getGps(str) {
      let arr = this.series.filter((item) => item.properties.name == str);
      if (arr.length == 1) {
        return arr[0].properties.center;
      }
      return [0, 0];
    },

    clickPoint(e) {
      uni.showModal({
        title: e.name,
        content: "当地溯源基地：" + e.value + "个，点击查看?",
        success: function (res) {
          if (res.confirm == true) {
            window.location.href =
              "https://digital.essc.top/dist/h5Test/baselarge/index.html";
          }
        },
      });
    },

    getIndex(e) {
      console.log(e.currentIndex);
      console.log(e);
      if (e.currentIndex == -1) {
        // console.log(e);
        this.getServerData(this.parent[this.parent.length - 1]);
        this.parent.pop();
      } else {
        if (
          this.series[0].properties.parent.adcode !=
          this.parent[this.markPoints.length - 1]
        ) {
          this.parent.push(this.series[0].properties.parent.adcode);
        }
        this.getServerData(this.series[e.currentIndex].properties.adcode);
      }
    },

    async getServerData(city = 230000) {
      //获取地图数据
      const res = await getMap({
        data: {
          File: city + ".json",
        },
      });
      if (res.Status == "success") {
        console.log(JSON.parse(res.Data));
        this.series = JSON.parse(res.Data).features;
        this.chartData = {
          series: JSON.parse(res.Data).features,
        };
      }
    },

    //获取溯源数据
    async getData() {
      const res = await Traceability({
        data: {},
      });
      if (res.Status === "success") {
        this.form = res;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: calc(100vh);
  padding: 20rpx;
  box-sizing: border-box;
  background-color: #f5f5f5;

  .title {
    margin: 20rpx 0 30rpx 0;
    font-weight: bold;
    font-size: 40rpx;
    display: flex;
    flex-flow: column;
    background-color: #fff;
    border-radius: 20rpx;
    padding: 20rpx;
    box-sizing: border-box;

    .Title_attached {
      display: inline-block;
      text-align: left;
      font-size: 24rpx;
      font-weight: normal;
      margin: 20rpx 0 0 20rpx;
    }
  }

  .Num {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-between;

    .item {
      width: 45%;
      height: 200rpx;
      display: flex;
      flex-flow: column;
      align-items: center;
      justify-content: space-around;
      margin: 0 0 20rpx 0;
      background-color: #fff;
      border-radius: 20rpx;
      padding: 20rpx;
      box-sizing: border-box;

      view:first-child {
        font-size: 60rpx;
        font-weight: bold;
        margin: 20rpx 0;
      }

      view:last-child {
        font-size: 24rpx;
      }
    }
  }

  .map {
    margin: 20rpx 0 30rpx 0;
    padding: 20rpx;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 20rpx;
    position: relative;
    overflow: hidden;
  }

  // .charts-box {
  //   width: 100%;
  //   height: 100%;
  //   position: relative;
  //   overflow: hidden;
  // }

  .points-box {
    position: absolute;
    width: 25px;
    height: 25px;
    color: #ffffff;
    font-size: 14px;
    text-align: center;
    background: url("../../static/icon/point.png");
    cursor: pointer;
    background-size: 100% auto;
    background-position: center;
    background-repeat: no-repeat;
    background-origin: content-box;
  }
}
</style>
